<template>
	<view class="box">

		<view class="top">
			<view class="status_bar">
				
			</view>

			<view class="logo">
				<image src="/static/home_logo.png" mode=""></image>
			</view>
			<view class="search">
				<u-search shape="round" mode="none" placeholder="社区活动" animation="false" disabled @click="gotoSearch" height="72"
				bg-color="#FFF" color="#ccc"></u-search>
			</view>
			<view class="content" v-show="!shopShow">
				<!-- 轮播图开始 -->
				<u-swiper class="swiper" :list="bannerList" name="url" border-radius="16" height="344" width="686"
					img-mode="aspectFill"></u-swiper>
				<!-- 轮播图结束 -->
				<view class="login-tip" v-show="isLogin" @click="toPage('/subPackages/login/login')" style="margin-top: 42rpx;">
					<view>
						<u-icon name="volume-up" style="margin-right: 6rpx;"></u-icon>
						<text>登录后，享受更多服务</text>
					</view>
					<view>
						<text style="margin-right: 6rpx;">去登录</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- 首页模块开始 -->
				<view class="shouye-box">
					<view class="shouye-item flex fcenter flexColumn" v-for="item in GoodsClass" :key="item.id" @click="handleClick(item)">
						<view class="" style="">
							<image style="width: 90rpx;height: 90rpx;" :src="item.icon[0].url"
								mode=""></image>
						</view>
						<text>{{item.title}}</text>
					</view>
				</view>
				<!-- 首页模块结束 -->
				
				<view class="nav-bar">
					<view >
						最新活动
					</view>
				</view>

				<view class="list_box" style="margin: 0;">
					<view v-if="list.length == 0" class="empty_box">
						<image src="/static/empty_img.png" mode=""></image>
						<text>暂无数据</text>
					</view>
					<view v-else class="list_item flex" v-for="(item, index) in list" :key="index" @click="toProductDetail(item)">
						<view class="left">
							<image class="list_item_img" :src="item.images[0].url" mode="aspectFill"></image>
						</view>
						<view class="right flex flexColumn">
							<view class="title">
								{{ item.name }}
							</view>
							<view class="desc line1">
								<span v-if="item.productServiceInfo.serviceHours" style="margin-right: 10rpx;">{{item.productServiceInfo.serviceHours}}  </span>|  {{ item.description }}
							</view>
							<view class="bottom flex">
								<view class="price">
									<span style="font-size: 26rpx;">￥</span>{{ item.unitPrice }}
								</view>
								<view class="list_item_btn">预约</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		recordHomePageApi,
		recordClickHomePageModuleApi
	} from '../../common/API/screenApi.js'
	import {
		getClassApi,
		getGoodsListApi,
		addAttentionApi,
		delAttentionApi,
		getGroupGoodsListApi
	} from '../../common/API/goodsApi.js'
	import {
		getBannerApi,
		getProjectCodeApi
	} from '../../common/API/userInfoApi.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		goodItem
	} from '../../components/goodItem.vue'
	import {
		getShopListApi
	} from '../../common/API/Salesman.js'
	import {
		getYMD,
		handleDate,
		mapSalesmanList
	} from '../../utils/filter.js'
	const app = getApp()
	export default {
		components: {
			goodItem
		},
		data() {
			return {
				wh: 0,
				capsule: {},
				GoodsClass: [],
				bannerList: [],
				active: 0,
				list: [],
				GoodsList: [],
				total: 0,
				pageNum: 1,
				throttle: false,
				ShopList: [],
				shopTotal: 0,
				ShopPageNum: 1,
				shopShow: false,
				DateObj: {},
				isShow: true,
				categoryIds: [-1,-2],
				isLogin: false
			};
		},
		computed: {
			...mapState('user', ['ylProjectCode', 'ylToken', 'ylUserInfo', 'ylEnterprise']),
			showList() {
				return this.GoodsList.length ? true : false
			},
			ylProject() {
				return uni.getStorageSync('ylProject')
			}
		},
		methods: {
			...mapMutations('user', ['MusetProjectCode', 'MusetEnterprise']),
			gotoSearch() {
				// 跳转到分包中的搜索页面
				uni.navigateTo({
					url: '/subPackages/search/search'
				})
			},
			async getGoodsClass() {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, 1)
				if (res.status === 200) {
					this.GoodsClass = res.data.filter(item => item.isShow)
				} else {
					uni.$showMsg(res.message)
				}
				console.log(this.GoodsClass, 'this.GoodsClass')
			},
			async getCommonGoodsList() {
				const res = await getGoodsListApi({
					salesType: '1',
					// createEnd: this.DateObj.createEnd,
					// createStart: this.DateObj.createStart,
					// appRecommend: 0,
					pageNum: this.pageNum,
					pageSize: 10,
					enterpriseCode: this.ylEnterprise.enterpriseCode,
					type: "1",
					// categoryIds: this.categoryIds
				})
				if (res.status === 200) {
					this.list.push(...res.data.records)
					this.total = res.data.total
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getBanner(callback) {
				const res = await getBannerApi(this.ylEnterprise.enterpriseCode)
				if (res.status === 200) {
					this.bannerList = res.data
				}
				callback && callback()
			},
			async getProjectCode() {
				const res = await getProjectCodeApi()
				console.log(res, 'MusetProjectCode')
				this.MusetProjectCode(res)
			},
			async getShopList() {
				const res = await getShopListApi()
				this.ShopList.push(...res.data)
				this.shopTotal = res.data.total
				if (!this.ylEnterprise.enterpriseCode) {
					this.MusetEnterprise(this.ShopList[0])
				}
			},
			handleShop(item) {
				this.MusetEnterprise(item)
				this.refresh()
			},
			async refresh() {
				Object.assign(this.$data, this.$options.data())
				//右上角胶囊高度
				this.capsule = wx.getMenuButtonBoundingClientRect()
				await this.getShopList()
				await this.getGoodsClass()
				await this.getCommonGoodsList()
				await this.getBanner(uni.stopPullDownRefresh)
			},
			
			async handleClick(item) {
				// console.log(item,)
				// return
				// if (item.commodityIdNames) {
				// 	uni.navigateTo({
				// 		url: `/subPackages/cateList/cateList?code=${item.commodityIdNames[0].productCode}&title=${item.title}`
				// 	})
				// } else {
					// uni.$showMsg('功能正在开发中, 敬请期待')
				if(item.title == '养老服务') {
					uni.navigateTo({
						url: '/subPackages/provideServe/provideServe?typeName=养老服务'
					})
				} else if(item.title == '健康驿站') {
					uni.navigateTo({
						url: '/subPackages/provideServe/provideServe?typeName=健康驿站'
					})
				} else if(item.title == '老年大学') {
					uni.switchTab({
						url: '/pages/elderlyUniversity/elderlyUniversity'
					})
				} else if(item.title == '殡仪祭祀') {
					uni.navigateTo({
						// url: '/subPackages/giftZone/giftZone'
						url: '/subPackages/communityActivities/communityActivities?type=byjs'
						
					})
				} else if(item.title == '德和风采') {
					uni.navigateTo({
						url: '/subPackages/grace/grace'
					})
				} else if(item.title == '社区文化') {
					uni.navigateTo({
						url: '/subPackages/communityActivities/communityActivities?type=sqwh'
					})
				} else if(item.title == '陪医陪诊') {
					uni.navigateTo({
						url: '/subPackages/provideServe/provideServe?typeName=陪医陪诊'
					})
				} else if(item.title == '兑换专区') {
					uni.navigateTo({
						url: '/subPackages/changerCenter/changerCenter'
					})
				}
				// }
				// const res = await recordClickHomePageModuleApi('dsyl', item.title)
				// console.log('点击首页模块埋点', res)
			},
			toProductDetail(item){
				console.log('list',this.list)
				console.log('item',item)
				uni.navigateTo({
					url: `/subPackages/detailByType/detailByWorker?item=${encodeURIComponent(JSON.stringify(item))}&type=1`
				})
			}
		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			await this.getCommonGoodsList()

		},
		async onShow() {
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			this.pageNum = 1
			this.total = 0
			this.list = []
			await this.getCommonGoodsList()
		},
		async onLoad(option) {
			console.log(option)
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
			option.spreadCode && uni.setStorageSync('spreadCode', option.spreadCode)
			// app.loginCallback = flag => { // 监听自定义回调函数执行
			// 	if (flag) {
			// 		api.post('/xxxxxxxxxxxxx').then((res) => { // post api
			// 			// do something
			// 		});
			// 	}
			// }
			if (!this.ylProjectCode) {
				await this.getProjectCode()
			}
			await this.getShopList()
			this.getGoodsClass()
			this.getBanner()
			const sysInfo = uni.getSystemInfoSync()
			// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			this.wh = sysInfo.windowHeight - 50
			
			const res = await recordHomePageApi('dsyl')
			console.log('访问首页埋点',res)
		},
		async onPullDownRefresh() {
			this.refresh()
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		onShareAppMessage() {
			//0:正式版,1:开发版,2:体验版
			return {
				title: "德和尚礼",
				imageUrl: 'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/dhsl/logo.png',
				path: `/pages/home/home?spreadCode=${this.ylUserInfo.username}`,
			}
		},
		onShareTimeline() {
			return {
				title: "德和尚礼",
				imageUrl: 'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/dhsl/logo.png'
			}
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		.card-bot-right{
			height: 70rpx;
		}
		.empty_box {
			height: 40vh;
			image {
				width: 330rpx;
				height: 285rpx;
			}
			text{
				margin-top: 0;
			}
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 32rpx;
		}
		.list_box {
			margin: 32rpx;
		
			.list_item {
				margin: 32rpx 0;
				.left {
					width: 220rpx;
					height: 165rpx;
					margin-right: 16rpx;
					.list_item_img {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.right{
					flex: 1;
					.title{ 
						font-size: 30rpx;
						color: #303133;
						font-weight: 600;
					}
					.desc{
						// margin-top: 20rpx;
						font-size: 28rpx;
						color: #999999;
					}
					.bottom{
						flex: 1;
						align-items: flex-end;
						justify-content: space-between;
					}
					.price{
						font-size: 34rpx;
						font-weight: 600;
						color: #FA3534;
					}
					.list_item_btn{
						width: 160rpx;
						height: 56rpx;
						background: #52C41A;
						color: #fff;
						font-size: 28rpx;
						font-weight: 400;
						border-radius: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		.top {
			width: 100%;
			height: 621rpx;
			background: linear-gradient( 180deg, #52C41A 0%, #FFFFFF 100%);;
			
			.nav-title {
				display: flex;
				justify-content: center;

				.enterprise-box {
					padding: 0 32rpx;
					flex: 1;
					color: #fff;
					display: flex;
					align-items: center;
				}


			}

			.logo {
				width: 230rpx;
				height: 80rpx;
				margin: 40rpx 0 40rpx 32rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				padding: 0 32rpx;
				// background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				padding: 32rpx;
				margin-top: -30rpx;
				.swiper {
					/deep/ .u-swiper-wrap {
						// margin-bottom: 32rpx;
					}
					image {
						border-radius: 24rpx;
						width: 100%;
						height: 344rpx !important;
					}
				}

				.scroll-view_H {
					width: 100%;
					display: flex;
					/* 超出部分隐藏 */
					overflow: hidden;
					justify-content: center;
					/* 文本不换行 */
					white-space: nowrap;
					background-color: #fff;
					padding: 16rpx 0;
					border-radius: 16rpx;
					margin-bottom: 32rpx;

					/* IE 10+ */
				}

				.nav-bar {
					font-size: 30rpx;
					color: #303133;
					font-weight: 600;
				}
			}
		}

		.mask {
			width: 100%;
			background-color: #fff;
			z-index: 99;

			.maskItem {
				padding: 20rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #ccc;
			}
		}
	}

	.scroll-item {
		/deep/ .u-col {
			// margin-left: 11rpx !important;
			// margin-right: 23rpx !important;
			margin-bottom: 32rpx !important;
			margin-top: 5rpx !important;
		}

	}

	.shouye-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// height: 405rpx;
		// margin: 42rpx -24rpx;
		margin-bottom: 42rpx;
		align-items: center;
		.shouye-item{
			width: 25%;
			margin-top: 42rpx;
		}
	}

	.search {
		margin: 0 32rpx 30rpx 32rpx;
		/deep/ .u-content{
			border-radius: 50rpx !important;
		}
		/deep/.uicon-search{
			font-size: 48rpx !important;
			top: -1px !important;
		}
	}

	.title_bg {
		width: 36rpx;
		height: 10rpx;
		background: #0091D7;
		// margin-left: 80rpx;
		// margin-top: 23rpx;
		position: absolute;
		margin-left: 58rpx;
	}
	.server-item{
		display: flex;
	}
	.server-item-img{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.server-item-right{
		display: flex;
		flex-direction: column;
		width: 462rpx;
		padding: 0 16rpx;
	}
	.server-item-right-name{
		font-size: 30rpx;
	}
	.server-item-right-center{
		display: -webkit-box;
		color: #999;
		font-size: 26rpx;
	}
	.split{
		width: 1rpx;
		height: 20rpx;
		background-color: #CCCCCC;
		margin: 10rpx;
	}
	.server-item-right-desc{
		color: #999;
		font-size: 26rpx;
		
	}
	.one-line{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.server-item-right-bottom{
		display: flex;
		justify-content: space-between;
	}
	.server-price-box{
		display: flex;
	}
	.price-unit{
		color: #FA3434;
		font-size: 26rpx;
		font-weight: 600;
	}
	.server-price{
		color: #FA3434;
		font-size: 34rpx;
		font-weight: 600;
	}
</style>